<template>
  <div class="home-container">
    <Nav1 @search="search"></Nav1>
    <div class="banner">
      <div class="toutiao-header">

      </div>
      <div class="search-container">
        <a href="" class="logo"></a>

        <div class="search">
          <input type="text" v-model="articleForm.title">
          <button @click="submitSearch">
            <i></i>
            <span></span>
          </button>
        </div>

        <div class="show-monitor">
          <div class="hot-word">
            <img
                src=""
                alt="">
            <span class="hot">热搜：</span>
            <div class="show-monitor2">
              <span class="words">马斯克再次称赞中国AI</span>
            </div>
          </div>
        </div>

      </div>

    </div>


    <aside></aside>

    <div class="main-content">
      <div class="article">
        <ul class="article-list">

          <li v-for="(item,index) in ArticleList" :key="index">
            <router-link :to="{ name: 'page', params: { id: item['articleId'] }}">
              <a href="">
                <div class="article-item-left">
                  <div class="article-item-left-text">{{ item.title }}</div>
                  <div>{{ item.username }}</div>
                  <div>{{ item.createTime }}</div>
                </div>
              </a>
            </router-link>

          </li>

        </ul>
      </div>

    </div>


  </div>
</template>

<script>
// @ is an alias to /src
import Nav1 from '@/components/nav/Nav1.vue';
import {articleList} from "@/utils/api";
import {parseTime} from "../../public/FormatTime"
import {articleSelect} from "@/utils/api";

export default {
  name: 'HomeView',
  components: {
    Nav1,
  },
  data() {
    return {
      ArticleList: [],
      articleForm: {
        userId: '',
        title: '',
        content: '',
        createTime: ''
      },
      flag: 0
    }
  },
  methods: {
    // 获取文章列表
    async getArticle() {
      // 使用catch反向逻辑,避免过多逻辑嵌套
      const res = await articleList().catch(err => {
        // 提示错误, 终止执行
        return console.error(err)
      })
      console.log(res, '请求成功');
      for (let i = 0; i < res.data.length; i++) {
        res.data[i].createTime = parseTime(res.data[i].createTime)
        this.ArticleList.push(res.data[i]);
      }
      // console.log(this.ArticleList)
    },

    // 搜索文章
    submitSearch() {
      articleSelect(this.articleForm)
          .then((response) => {
            // 处理成功的响应
            console.log('Article submitted successfully!', response);
            this.ArticleList = []
            for (let i = 0; i < response.data.length; i++) {
              response.data[i].createTime = parseTime(response.data[i].createTime)
              this.ArticleList.push(response.data[i]);
            }
          })
          .catch((error) => {
            // 处理错误
            console.error('Error submitting article:', error);
          });
    },

    // nav搜索
    search(val,flag){
      this.ArticleList = val
      console.log(this.ArticleList)
      this.flag = flag
      // alert(this.flag)
      // this.$router.push('/')
    }
  },
  mounted() {
    // alert(this.flag)
    // alert(sessionStorage.getItem('userId'))
    if(this.flag === 0)
      this.getArticle()
  }
}
</script>

<style scoped>
@import "../../public/default.css";

.home-container {
  width: 100%;
  height: 5510px;
  box-sizing: border-box;
}

.banner {
  width: 100%;
  height: 277.68px;
  background-image: url('https://gd-hbimg.huaban.com/d101823be1a49e3d099ebaaaabc9b5044a77ed9f1082-QnknI2_fw658webp'); /* 设置背景图片的路径 */
  background-size: cover; /* 背景图片以尽可能大的尺寸填充 <div> */
}

.toutiao-header {
  width: 100%;
  height: 52px;
}

.search-container {
  width: 704px;
  height: 157px;
  margin: 0 auto;
}

.logo {
  display: block;
  width: 164px;
  height: 55px;
  margin: 0 auto 20px;
  background: url() no-repeat 50%;
  background-size: contain;
}

.search {
  width: 704px;
  height: 48px;
  position: relative;
}

.search input {
  width: 97%;
  height: 48px;
  font-size: 16px;
  line-height: 20px;
  color: #222;
  padding-left: 18px;
  background-color: #fff;
  /*padding-right: 92px;*/
  /*border: 2px solid #fff;*/
  border-radius: 8px;
  z-index: 10;
  outline: none;
}

.search button {
  width: 72px;
  background: #f04142;
  height: 51px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border: none;
  position: absolute;
  top: 1px;
  right: -2px;
  z-index: 11;
}

.search button i {
  width: 32px;
  height: 32px;
  background-image: url(//lf3-cdn2-tos.bytescm.com/toutiao/toutiao_web_pc/svgs/search_icon.3dd08573.svg);
  display: block;
  margin: auto;
}

.show-monitor {
  width: 585px;
  height: 34.2px;
  font-size: 15px;
  display: inline-block;
}

.hot-word {
  display: block;
  padding-top: 12px;
}

.hot-word img {
  width: 20px;
  height: 20px;
  margin-bottom: -3px;
}

.hot {
  cursor: inherit;
  margin-left: 8px;
  margin-right: 4px;
}

.show-monitor2 {
  width: 170px;
  height: 30px;
  display: inline-block;
}

.words {
  cursor: pointer;
  margin-right: 16px;
  outline: none;
}

.main-content {
  width: 1066px;
  height: 5533px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 16px 16px 0;

}

.article-list {
  width: 80%;

  margin: 10px auto;
}

.article-list li {
  height: 120px;
}

.article-item-left {
  width: 600px;
  height: 100%;
  text-align: center;
  margin: 5px auto;
  border: 2px solid gray;
  border-radius: 4px;
}

.article-item-left-text {
  color: #222222;
  margin-top: 20px;
}
</style>
